<template>
  <div class="orderList">
    <div class="pageHeader">
      <img src="@/static/images/arrow-left.png" alt="" @click="back">
      <!-- <van-search v-model="search" placeholder="请输入搜索关键词" shape="round"/> -->
      <span>订单列表</span>
    </div>

    <van-sticky>
      <ul class="orderStatus">
        <li :class="item.isCheck?'on':''" v-for="(item,index) in tapList" :key="index" @click="tabHandle(index)">{{item.title}}</li>
      </ul>
    </van-sticky>
    
    <van-pull-refresh v-model="refreshing" class="listArea" @refresh="onRefresh">
      <van-list
        v-show="!refreshing"
        v-model="loading"
        :offset="100"
        :immediate-check="false"
        :finished="finished"
        finished-text="没有更多了"
        @load="getData"
      >
        <div class="listContent" v-for="(item,index) in orderList" :key="index">
          <div class="listTop">
            <div class="listStatus">
              {{changeStatus(item)}}
            </div>

            <div class="listDate">
              {{ item.createtime | changeTime }}
            </div>
          </div>

          <div class="listGround">
            <p class="ground">
              {{item.product_info.title}} / {{item.play_time | changeTime}}
            </p>

            <p class="listTotal">
              ￥{{item.total_price}}
            </p>
          </div>

          <div class="listMessage acea-row row-middle" v-if="item.status==0&&item.is_pay_valid == 1">
            <van-icon name="info-o" size="14" />
            <span class="acea-row row-middle">请在<van-count-down :time="item.paytime_remain*1000" format="HH 时 mm 分 ss 秒" />内完成支付</span>
          </div>

          <div class="listOperate">
            <template v-if="item.is_pay_valid == 1">
              <span v-if="item.status == 0" @click="quxiao(item.id)">取消订单</span>

              <router-link :to="{path: routerUrl+'/go2buy/'+item.id}" v-if="item.status == 0">
                <span>去付款</span>
              </router-link>
            </template>
            <router-link :to="{path: routerUrl+'/orderdetail/'+item.id}">
              <span>查看详情</span>
            </router-link>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>

  </div>
</template>

<style scoped>
  .listMessage{
    margin-top: 20px;
    font-size: 24px;
  }
  .listMessage >>> .van-count-down{
    font-size: 12px;
    color: #ee0a24;
  }
  .listMessage span{
    margin-left: 10px;
  }
  .orderList {
    min-height: 100vh;
    background-color: #f2f3f5;
  }
  .pageHeader {
    /* background: #f5f5f5; */
    background: #ffffff;
  }
  .van-search {
    padding: 0;
    margin-left: 30px;
    background: #f5f5f5;
  }
  .van-search__content {
    background: #ffffff;
  }

  .orderStatus {
    display: flex;
    justify-content: space-around;
    background: #89c3fc;
    color: #000000;
    line-height: 80px;
    font-size: 26px;
  }

  .orderStatus li.on {
    color:#2D8AEA;
    font-weight: 700;
  }

  .orderList .van-pull-refresh{
    min-height: calc(100vh - 89px);
    box-sizing: border-box;
  }

  .listArea {
    margin: 20px 20px 0;
    /* padding-bottom: 20px; */
  }

  .listArea .listContent {
    background: #ffffff;
    padding: 20px;
    margin-bottom: 20px;
  }

  .listArea .listContent:last-child {
    margin-bottom: 0;
  }

  .listArea .listTop , .listArea .listTel , .listArea .listGround {
    display: flex;
    justify-content: space-between;
  }

  .listArea .listTop {
    margin-bottom: 30px;
    font-size: 26px;
  }

  .listArea .listTop .listStatus {
    color: #1989fa;
  }

  .listArea .listTel {
    justify-content: flex-start;
    margin-bottom: 20px;
  }

  .listArea .listTel p {
    position: relative;
    padding-right: 20px;
  }

  .listArea .listGround .ground {
    color: #cccccc;
    font-size: 26px;
  }

  .listArea .listGround .listTotal {
    color: #ee0a24;
    font-size: 26px;
  }

  .listOperate {
    display: flex;
    justify-content: flex-end;
    margin-top: 30px;
  }

  .listOperate span {
    display: block;
    width: 120px;
    height: 40px;
    line-height: 40px;
    color: #cccccc;
    border-radius: 20px;
    border: 1px solid #cccccc;
    margin-left: 20px;
    text-align: center;
    font-size: 23px;
    box-sizing: border-box;
  }

  .listOperate a span {
    color: #1989fa;
    border: 1px solid #1989fa;
  }
</style>

<script>
import Vue from 'vue';
import { Search, Toast, Dialog } from 'vant';
import api from 'api'
import moment from 'moment'
import config from 'api/config.js'

Vue.use(Search);
Vue.use(Dialog)

export default {
  data() {
    return {
      routerUrl:config.routerUrl,
      search: '',
      orderList: [],
      showTap:false,
      type:0,
      page:1,
      pagesize:10,
      params:{},
      tapList:[],
      refreshing:false,
      loading:false,
      finished:false
    }
  },
  created() {
    // console.log("created")
  },
  activated() {
    // console.log("activated")
    this.finished = false
    this.page = 1
    this.orderList = []
    this.init()
  },
  methods: {
    init(){
      this.type = this.$route.params.type
      // 父级type -1全部 0未支付 1已支付 2退款
      switch(this.type){
        case "-1":
          this.tapList = [
            {id:null,type_id:-1,title:"全部",isCheck:true},
            {id:0,type_id:0,title:"未支付",isCheck:false},
            {id:1,type_id:1,title:"已支付",isCheck:false},
          ]
        break;
        case "0":
          this.tapList = [
            {id:null,type_id:-1,title:"全部",isCheck:false},
            {id:0,type_id:0,title:"未支付",isCheck:true},
            {id:1,type_id:1,title:"已支付",isCheck:false},
          ]
        break;
        case "1":
          this.tapList = [
            {id:null,type_id:-1,title:"全部",isCheck:false},
            {id:0,type_id:0,title:"未支付",isCheck:false},
            {id:1,type_id:1,title:"已支付",isCheck:true},
          ]
        break;
        case "2":
          this.tapList = [
            {id:1,type_id:2,title:"申请中",isCheck:true},
            {id:2,type_id:2,title:"已退款",isCheck:false},
          ]
        break;
      }
      this.getData()
    },
    getData(){
      this.loading = true
      let params = {}
      let f = this.tapList.find(e=>e.isCheck)
      this.$store.commit("common/setOrderFromType",f.type_id)
      switch(this.type){
        case "-1":
        case "1":
        case "0":
          params={
            refund_status:0,
            paid:f.id,
            page:this.page,
            pagesize:this.pagesize
          }
        break;
        case "2":
          params={
            refund_status:f.id,
            page:this.page,
            pagesize:this.pagesize
          }
        break;
      }
      api.get("/order/orderList",params).then(e=>{
        if(e.data.order_list.length > 0 ){
          if(e.data.order_list.length == this.pagesize){
            this.page++
          }else{
            this.finished = true
          }
          this.orderList = this.orderList.concat(e.data.order_list)
        }else{
          this.finished = true
        }
        this.loading = false
        this.refreshing = false
      })
    },
    tabHandle(idx){
      if(!this.loading){
        this.finished = false
        this.page = 1
        this.orderList = []
        let tapList = this.tapList
        for(let i of this.tapList){
          i.isCheck = false
        }
        tapList[idx].isCheck = true
        document.documentElement.scrollTop = 0
        this.getData()
      }
    },
    quxiao(order_id){
      Dialog.confirm({
        title: '确认取消订单',
        beforeClose:(action, done)=>{
          if(action === 'confirm'){
            api.get("/order/cancelOrder",{order_id}).then(e=>{
              done()
              Toast.success('取消成功')
              this.onRefresh()
            })
          }else{
            done();
          }
        },
      });
    },
    onRefresh(){
      this.page = 1
      this.getData()
      this.orderList = []
      this.finished = false
      this.refreshing = true
    },
    changeStatus(item){
      if(this.type != 2){
        switch(item.status){
          case -1:
            return "已取消";
          break;
          case 0:
            if(item.is_pay_valid == 1){
              return "待支付";
            }else{
              return "已过期";
            }
          break;
          case 1:
            return "待确认";
          break;
          case 2:
            return "已确认";
          break;
          case 3:
            return "待完成";
          break;
          case 4:
            return "已完成";
          break;
        }
      }else{
        switch(item.refund_status){
          case 0:
            return "未退款";
          break;
          case 1:
            return "申请中";
          break;
          case 2:
            return "已退款";
          break;
        }
      }
    },
    back(){
      this.$router.push(this.routerUrl+"/user");//返回上一层
    },
  },
  filters:{
    changeTime(time){
      return moment(time*1000).format("YYYY-MM-DD HH:mm:ss")
    }
  }
}
</script>